﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>TODDO</title>
	<link rel="stylesheet" href="main/style.css">
</head>
<body>
	<header>
		<div class="inpad">

			<span class="user">
				Ruslan Girichev 
				<a href="">Выйти</a>
			</span>
			<h1>TODDO</h1>
		</div>

	</header>
	<article>
		<div id="notification">
			<div class="message">
				<p>Синхронизация не производится. Соединение через <span>4</span> с. <a href="">Повторить</a></p>
			</div>
		</div>
		<section id="new">
			<textarea placeholder="Новая задача" autofocus="autofocus" rows="1" tabindex="1"></textarea>
		</section>
		<ul id="lists">
			<li class="main">
				<ul class="due">
					<li><p><span class="drag"></span><label><em class="check"></em></label>Просроченные задачи выделяются среди остальных<em>7 августа</em></p></li>
				</ul>
				<ul class="date">
					<li class="checked"><p><span class="drag"></span><label><em class="check"></em></label>Задачи с датой группируются как важные<em>Сегодня</em></p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Добавьте символ # чтобы задать дату для задачи<em>25 сентября</em></p></li>
				</ul>
				<ul class="other">
					<li><p><span class="drag"></span><label><em class="check"></em></label>Можно работать со списком без подключения к интернету</p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Для редактирования используется двойной клик</p></li>
					<li class="editing"><p><span class="drag"></span><label><em class="check"></em></label>Скиньте пожалуйста примеры программ (коды), которые реально работают</p><p class="edit"><button><em class="delete"></em></button><textarea rows="1" style="width: 460px;">Скиньте пожалуйста примеры программ (коды), которые реально работают</textarea></p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Представьте заданную таблицу в виде файла БД</p></li>
				</ul>
			</li>
			<li>
				<p class="title"><span class="drag"></span>Рабочие задачи</p>
				<ul class="date">
					<li><p><span class="drag"></span><label><em class="check"></em></label>Палиндромом называют строку, читающуюся одинаково с обеих сторон<em>Сегодня</em></p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Найдите ее наибольшую по длине подстроку, не являющуюся палиндромом<em>25 сентября</em></p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Примеры решений по физике электростатика<em>26 сентября</em></p></li>
				</ul>
				<ul class="other">
					<li><p><span class="drag"></span><label><em class="check"></em></label>Можно работать со списком без подключения к интернету</p></li>
					<li class="dragging"><p><span class="drag"></span><label><em class="check"></em></label>При перетаскивании должно сохраняться старое место</p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Скиньте пожалуйста примеры программ (коды), которые реально работают</p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Представьте заданную таблицу в виде файла БД</p></li>
				</ul>
			</li>
			<li>
				<p class="title"><span class="drag"></span>Покупки к походу</p>
				<p class="title edit"><textarea rows="1" style="width: 200px;">Покупки к походу</textarea></p>
				<ul class="other">
					<li class="drag-to" style="height: 32px; width: 375px"></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Два спальных мешка</p></li>
					<li><p><span class="drag"></span><label><em class="check"></em></label>Котелок</p></li>
				</ul>
			</li>
			<li>
				<p class="title shared"><span class="drag"></span><span class="person"></span>Roman Evgenyev<em>roma.evgenyev@gmail.com</em></p>
				<p class="title edit"><textarea rows="1" style="width: 200px;">Покупки к походу</textarea></p>
				<ul class="other">
					<li><p><span class="drag"></span><label><em class="check"></em></label>Вернуть флешку на 512 мегабайт</p></li>
				</ul>
			</li>
		</ul>
	</article>
</body>
</html>
